<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的订单</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #333;
    }
    .order-list {
      max-width: 800px;
      margin: auto;
    }
    .order-card {
      background: white;
      margin-bottom: 20px;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .order-card h3 {
      margin: 0 0 10px;
      color: #d9232e;
    }
    .order-card p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
<div id="app">
  <h1>我的订单</h1>
  <div class="order-list">
    <div class="order-card" v-for="order in orders" :key="order.orderId">
      <h3>订单号：{{ order.orderNumber }}</h3>
      <p>菜品名称：{{ order.dishName }}</p>
      <p>价格：¥ {{ order.orderPrice }}</p>
      <p>下单时间：{{ formatTime(order.orderCreateTime) }}</p>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      orders: []
    },
    mounted() {
      axios.get("order/cust/1").then(response => {
        if (response.data.code === 200) {
          this.orders = response.data.data;
        } else {
          alert("订单加载失败: " + response.data.message);
        }
      });
    },
    methods: {
      formatTime(datetime) {
        return new Date(datetime).toLocaleString();
      }
    }
  });
</script>
</body>
</html>